<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <title>6关于我们</title>
    <style>
        .aboutUs6 {
            width: 100%;
        }

        .aboutUs6_dFlex1,
        .aboutUs6_dFlex3,
        .aboutUs6_dFlex2 {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .aboutUs6_lText {
            width: 48.5%;

        }

        .aboutUs6_lText_title {
            margin-bottom: 40px;
        }

        .aboutUs6_lText_title h3 {
            color: var(--c_theme);
            font-size: 20px;
            line-height: 30px;
            font-weight: 700;
        }

        .aboutUs6_lText_title span {
            color: var(--c_subtitle);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            display: block;
        }

        .aboutUs6_lText p:nth-child(2) {
            margin-bottom: 28px;
        }

        .aboutUs6_lText p {
            color: var(--c_subtitle);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
        }

        .aboutUs6_rImg {
            width: 48.5%;
            position: relative;
            height: 220px;
        }

        .aboutUs6_dFlex1 .aboutUs6_lText:nth-child(1) {
            order: 1;
        }

        .aboutUs6_dFlex1 .aboutUs6_rImg:nth-child(2) {
            order: 2;
        }

        .aboutUs6_dFlex1 .aboutUs6_rImg:nth-child(3) {
            order: 3;
        }

        .aboutUs6_dFlex1 .aboutUs6_lText:nth-child(4) {
            order: 4;
        }

        /* 第二种 */
        .aboutUs6_dFlex2 .aboutUs6_lText:nth-child(1) {
            order: 1;
        }

        .aboutUs6_dFlex2 .aboutUs6_rImg:nth-child(2) {
            order: 0;
        }

        .aboutUs6_dFlex2 .aboutUs6_rImg:nth-child(3) {
            order: 3;
        }

        .aboutUs6_dFlex2 .aboutUs6_lText:nth-child(4) {
            order: 4;
        }

        /* 第三种 */
        .aboutUs6_dFlex3 .aboutUs6_lText:nth-child(1) {
            order: 1;
        }

        .aboutUs6_dFlex3 .aboutUs6_rImg:nth-child(2) {
            order: 2;
        }

        .aboutUs6_dFlex3 .aboutUs6_rImg:nth-child(3) {
            order: 5;
        }

        .aboutUs6_dFlex3 .aboutUs6_lText:nth-child(4) {
            order: 4;
        }


        .aboutUs6_dFlex1 .aboutUs6_rImg img {
            width: 390px;
            height: 220px;
            position: absolute;
            left: 42.5%;
        }

        .aboutUs6_dFlex2 .aboutUs6_rImg img {
            width: 390px;
            height: 220px;
            position: absolute;
            left: 0%;
        }

        .aboutUs6_dFlex3 .aboutUs6_rImg img {
            width: 390px;
            height: 220px;
            position: absolute;
            right: 0%;
        }

        .aboutUs6_dFlex1 div:nth-child(3) img {
            left: 0;
            background-color: pink;
        }

        .aboutUs6_dFlex1 div:nth-child(n+3),
        .aboutUs6_dFlex2 div:nth-child(n+3),
        .aboutUs6_dFlex3 div:nth-child(n+3),
        .aboutUs6_dFlex4 div:nth-child(n+3) {
            margin-top: 60px;
        }

        /* 第二种 */
        .aboutUs6_dFlex2 div:nth-child(3) img {
            left: 0;
        }

        @media(max-width: 768px) {

            .aboutUs6_dFlex1 .aboutUs6_lText,
            .aboutUs6_dFlex2 .aboutUs6_lText,
            .aboutUs6_dFlex3 .aboutUs6_lText {
                width: 100%;
            }

            .aboutUs6_dFlex1 .aboutUs6_rImg,
            .aboutUs6_dFlex2 .aboutUs6_rImg,
            .aboutUs6_dFlex3 .aboutUs6_rImg {
                width: 100%;
                position: static;
            }

            .aboutUs6_dFlex1 .aboutUs6_rImg img,
            .aboutUs6_dFlex2 .aboutUs6_rImg img,
            .aboutUs6_dFlex3 .aboutUs6_rImg img {
                width: 100%;
                position: static;
            }

            .aboutUs6_dFlex1 .aboutUs6_lText_title,
            .aboutUs6_dFlex2 .aboutUs6_lText_title,
            .aboutUs6_dFlex3 .aboutUs6_lText_title {
                margin-bottom: 20px;
                margin-top: 10px;
            }

            .aboutUs6_dFlex1 .aboutUs6_lText p:nth-child(2),
            .aboutUs6_dFlex2 .aboutUs6_lText p:nth-child(2),
            .aboutUs6_dFlex3 .aboutUs6_lText p:nth-child(2) {
                margin-bottom: 14px;
            }

            .aboutUs6_dFlex1 .aboutUs6_lText p,
            .aboutUs6_dFlex2 .aboutUs6_lText p,
            .aboutUs6_dFlex3 .aboutUs6_lText p {
                margin-bottom: 10px;
            }

            .aboutUs6_dFlex1 div:nth-child(3),
            .aboutUs6_dFlex2 div:nth-child(3),
            .aboutUs6_dFlex3 div:nth-child(3) {
                margin-top: 20px;
            }

            .aboutUs6_dFlex1 div:nth-child(4),
            .aboutUs6_dFlex2 div:nth-child(4),
            .aboutUs6_dFlex3 div:nth-child(4) {
                margin-top: 10px;
            }

            .aboutUs6_dFlex1 .aboutUs6_lText:nth-child(1),
            .aboutUs6_dFlex2 .aboutUs6_lText:nth-child(1),
            .aboutUs6_dFlex3 .aboutUs6_lText:nth-child(1) {
                order: 2;
            }

            .aboutUs6_dFlex1 .aboutUs6_rImg:nth-child(2),
            .aboutUs6_dFlex2 .aboutUs6_rImg:nth-child(2),
            .aboutUs6_dFlex3 .aboutUs6_rImg:nth-child(2) {
                order: 1;
                background-color: #092049;
            }

            .aboutUs6_dFlex3 .aboutUs6_rImg:nth-child(3) {
                order: 4;
            }
        }
    </style>
</head>

<body>
    <div class="aboutUs6 modular title_center">
        <div class="public_width">
            <div class="public_title">
                <h2>关于我们</h2>
                <p>About</p>
            </div>
            <div class="aboutUs6_dFlex1">
                <div class="aboutUs6_lText">
                    <div class="aboutUs6_lText_title">
                        <h3>WHO WE ARE</h3>
                        <span>我们是谁？</span>
                    </div>
                    <p>替品牌讲一个好听的故事，就是我们一直在做的事情。</p>
                    <p>我们是一家专注于品牌营销和效果营销的数字整合营销传播公司，以领先的技术实力和设计水平，打造行业品牌、树立企业形象，为客户提供网站建设、视觉设计开发、品牌整合营销推广、电商产品运营推广、三维互动互联网新技术应用为一体的创新高级品牌网站建设服务。
                    </p>
                </div>
                <div class="aboutUs6_rImg">
                    <img src="https://17345546.s61i.faiusr.com/4/AD0IitiiCBAEGAAg8f7O2wUo2Ou4ggcwrgM48gE.png.webp"
                        alt="">
                </div>


                <div class="aboutUs6_rImg">
                    <img src="../images/number_1.jpg" alt="">
                </div>
                <div class="aboutUs6_lText">
                    <p>为其塑造全新品牌视觉形象，其是一家座落于国家软件产业基地广州天河软件内的智能科技公司，
                        该公司是中国进入电信增值业务和拥有语音增值业务产品的企业，其软件产品在电信运商、政
                        府信息化、大中型企业等行业客户领域得到了广泛应用。<br><br>
                        XXXXXX科技连续多年被认定为国家规划布局内重点软件企业、国家XXXXX企业、广州软件园XXX企业、国家XXX信息系统集成XX资质企业、重信用守合同企业、省级安全技术防范XXX企业。</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>